﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<fmt:setBundle basename="ApplicationMessage" />

<div class="row form-horizontal ihg-form">
  <div class="ihg-content-layout">
    <div class="row form-horizontal ihg-form" style="padding: 0px;">
    
      <div class="col-xs-6">
        <div class="timeline-overflow admin-timeline" style="overflow-y: initial;">
          <div style="position: relative;">
          <ul class="col-xs-1 timeline-wrap list-unstyled">
            
            <li class="timeline-item" data-time="8:50">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="8:55">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="9:00">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="9:05">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item has-content bg-color-gray" data-time="10:15">
              <div class="timeline-point">10:15</div>
            </li>
            <li class="timeline-item" data-time="9:15">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="9:20">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="9:25">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="9:30">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="9:35">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="9:40">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="9:45">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="9:50">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="9:55">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="10:00">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="10:05">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item ${not empty peerMeeting ? 'has-content bg-color-gray' : ''}" data-time="10:45">
              <div class="timeline-point">${not empty peerMeeting ? '10:45' : ''}</div>
            </li>
            <li class="timeline-item" data-time="11:40">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="11:45">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="11:50">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="11:55">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="12:00">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="12:05">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="12:10">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="12:15">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="12:20">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="12:25">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="12:30">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="12:35">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="12:40">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item ${not empty peerMeeting ? 'has-content bg-color-gray' : ''}" data-time="12:45" >
              <div class="timeline-point">${not empty peerMeeting ? '12:45' : ''}</div>
            </li>
            <li class="timeline-item" data-time="12:50">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="12:55">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="13:00">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="13:05">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="13:10">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="13:15" >
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="13:20">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="13:25">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="13:30">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="13:35">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="13:40">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="13:45">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="13:55">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="14:00">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="14:20">
              <div class="left-timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="14:25">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="14:30">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="14:35">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="14:40">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="16:25">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item has-content bg-color-gray" data-time="16:30">
              <div class="left-timeline-point">16:30</div>
            </li>
            <li class="timeline-item" data-time="16:35">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="16:40">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="16:45">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="16:35">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="16:40">
              <div class="timeline-point"></div>
            </li>
            <li class="timeline-item" data-time="16:45">
              <div class="timeline-point"></div>
            </li>
          </ul>
          
          <div class="timeline-content-wrap" style="position:absolute; left:0; right: 0;">
          
            <div class="timeline-content right-timeline-content"  style="top: 60px; height: 130px;">
              <a href="${ctx.host}/sessions/${session.id}/day-two-opening" class="alink" data-start="${taskMap['Assessor Day Two Opening'].startDate.time}" data-end="${taskMap['Assessor Day Two Opening'].endDate.time}">
                <h2 class="timeline-title"> 
                  <p class="timeline-time"><i class="glyphicon glyphicon-time"></i>10:15-10:45</p>
                </h2>
                <div class="description">Assessor Day 2 Opening & Notifications[10:15-10:45] 30min </div>
              </a>
            </div>
            
            <div class="timeline-content right-timeline-content" style="top: 220px; height: 140px;">
              <a href="${ctx.host}/sessions/${session.id}/peer-calibrations?formlink=true" class="alink" data-start="${taskMap['Peer Calibration'].startDate.time}" data-end="${taskMap['Peer Calibration'].endDate.time}">
                <h2 class="timeline-title"> 
                  <span class="timeline-time"><i class="glyphicon glyphicon-time"></i>10:45-11:45</span>
                </h2>
                <div class="description">Peer Calibration & Notifications [10:45-11:45]60min </div>
              </a>
            </div>
            
            <div class="timeline-content right-timeline-content" style="top: 400px; height: 140px;">
              <a href="${ctx.host}/sessions/${session.id}/peer-calibrations?formlink=true" class="alink" id="calibration-two">
                <h2 class="timeline-title"> 
                  <span class="timeline-time"><i class="glyphicon glyphicon-time"></i>12:45-15:45</span>
                </h2>
                <div class="description">Peer Calibration & Notifications [12:45-15:45]180min </div>
              </a>
            </div>
            
            <div class="timeline-content left-timeline-content"  style="top: 670px; height: 110px;">
              <a href="${ctx.host}/sessions/${session.id}/report-check" class="alink left-alink" data-start="${taskMap['Report Quality Check'].startDate.time}" data-end="${taskMap['Report Quality Check'].endDate.time}">
                <h2 class="timeline-title">
                  <span class="left-timeline-time pull-right"><i class="glyphicon glyphicon-time"></i>16:30-17:30</span>
                </h2>
                <div class="description">Report Quality Check[16:30-17:30] 60min</div>
              </a>
            </div>
          </div>
          
        </div>
        </div>
      </div>
      
      <div class="col-xs-6" style="padding-right:30px;">
        <c:forEach var="participator" items="${participators}">
          <table class="table table-striped ihg-table tab-pane">
            <thead>
              <tr>
                <th style="width:12%">${participator.key}</th>
                <th style="width:22%">Scoring</th>
                <th style="width:22%">Peer Calibration</th>
                <th style="width:22%">Report Submission</th>
              </tr>
            </thead>
            <tbody>
              <c:forEach var="delegateParticipator" items="${participators[participator.key]}">
                <tr>
                  <td>${delegateParticipator.delegateName}</td>
                  <td>${delegateParticipator.assessorName}&nbsp;&nbsp;
                    <img src="${ctx.resource}/images/${finalTasks[delegateParticipator.assessorIdString].status.finish ? 'check' : 'error'}.png" style="width:13px;margin-right:10px;">
                  </td>
                  <td>${delegateParticipator.assessorName}&nbsp;&nbsp;
                    <img src="${ctx.resource}/images/${calibrationStatus[delegateParticipator.delegateId].finish ? 'check' : 'error'}.png" style="width:13px;margin-right:10px;">
                  </td>
                  <td>${reportTasks[delegateParticipator.delegateIdString].assessor.name}&nbsp;&nbsp;
                    <img src="${ctx.resource}/images/${reportTasks[delegateParticipator.delegateIdString].status.finish ? 'check' : 'error'}.png" style="width:13px;margin-right:10px;">
                  </td>
                </tr>
              </c:forEach>
            </tbody>
          </table>
        </c:forEach>
      </div>
    </div>
  </div>
</div>